

    //模块的核心,就是 layui.js 的两个底层方法:用于定义模块的 layui.define(),一个加载模块的 layui.use()
    $(function(){
        layui.use('form',function (){       //加载''中  "form" 模块
                var form = layui.form;      //layui. 获取上方的 "form" 模块
                $.ajax({                 //执行 ajax
                    type:"post",
                    url:'/room/findArea',
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    success:function (data){
                        var selArea =  "<option value='0'>--请选择区域--</option>";
                        for (var i = 0; i < data.length; i++) {
                            selArea+="<option name="+data[i].area+">"+data[i].area+"</option>"
                        }
                        $("#area").html(selArea);     //需获取循环遍历的selArea集合  此处使用append 不会覆盖默认option,html会覆盖默认option
                        form.render('select');          //渲染上面获取的到 'form' 模块中的 'select'
                    },error:function (e){
                        alert("Sorry,Failure!");
                    }
                })

                //监听lay-filter按钮
                form.on('select(area)',function (data){
                    var no = data.value;             //上方data数据转换为var变量
                    var json = {"no":no}          //将变量转换为var对象
                    if (no!='0'){
                        $.ajax({
                            type:"post",
                            url:'/room/findBuildingNo',
                            data:JSON.stringify(json),
                            dataType:"json",
                            contentType:"application/json;charset=utf-8",
                            success:function (data){
                                $("#buildingNo").attr("disabled",false);
                                var buildingNo = "<option value='0'>--请选择楼号--</option>";
                                for (var i = 0; i < data.length; i++) {
                                    buildingNo+="<option value="+data[i].buildingNo+">"+data[i].buildingNo+"</option>"
                                }
                                $("#buildingNo").html(buildingNo);
                                form.render('select');
                            },error:function (q){
                                alert("Sorry,Failure2!");
                            }
                        })


            form.on('select(buildingNo)',function(data){
                    var floor = data.value;             //上方data数据转换为var变量
                    var json = {"floor":floor,"no":no};         //将变量转换为var对象
                    if (floor!="0"){
                        $.ajax({
                            type:"post",
                            url:'/room/findBuildingFloor',
                            data:JSON.stringify(json),
                            dataType:"json",
                            contentType:"application/json;charset=utf-8",
                            success:function (data){
                                $("#buildingFloor").attr("disabled",false);
                                var buildingFloor = "<option value='0'>--请选择楼层--</option>";
                                for (var i = 0; i < data.length; i++) {
                                    buildingFloor+="<option value="+data[i].buildingFloor+">"+data[i].buildingFloor+"</option>"
                                }
                                $("#buildingFloor").html(buildingFloor);
                                form.render('select');      //渲染上面获取的到 'form' 模块中的 'select'
                            },error:function (w){
                            alert("Sorry,Failure3!");
                        }
                        })
                    }else{
                        $("#buildingFloor").attr("disabled",true);  //如果楼号为0,则禁用楼层下拉框
                        $("#buildingFloor").val('0');               //将楼层调整为0(--请选择楼层--)
                        form.render('select');                      //渲染select
                    }
            })
            }
                    else{
                        $("#buildingNo").attr("disabled",true);     //如果区域为0,则禁用楼号下拉框
                        $("#buildingFloor").attr("disabled",true);  //如果楼号为0,则禁用楼层下拉框
                        $("#buildingNo").val('0');                  //将楼层调整为0(--请选择楼层--)
                        $("#buildingFloor").val('0');               //将楼层调整为0(--请选择楼层--)
                        form.render('select');                      //渲染select
                    }

         })

        })
    })

function add0(m){
    return m<10?'0'+m:m;
}


layui.use('table', function () {
    var table = layui.table;
    //第一个实例
    table.render({
        elem: '#demo'       //id选择器
        , url: '/room/findAllRoom' //数据接口
        , method: 'post'
        , page: true //开启分页
        , toolbar: 'default' //开启头部工具栏，此处显示默认图标，可以自定义模板，详见文档
        , limit: 7          //默认是10
        , id:'testReload'
        , limits: [3, 5, 7]
        , cols: [[
            { width: 80, type: 'checkbox' },
            { field: 'pkId', width: 100, title: '教室ID', sort: true,hide:true },
            { field: 'area', width: 90,title: '区域', sort: true,},
            { field: 'buildingNo', width: 90,title: '楼号' },
            { field: 'buildingFloor', width: 100,title: '楼层' },
            { field: 'classroomId', width: 90,title: '教室id' , },
            { field: 'classroomNumber', width: 90,title: '教室号', sort: true },
            { field: 'classroomName', width: 120,title: '教室名称' },
            { field: 'galleryful', width: 120,title: '容纳人数', sort: true },
            { field: 'useStatus', width: 140,title: '使用状态', sort: true },
            { field: 'deleteFlag', width: 140,title: '删除标志', hide:true },
            { field: 'createTime', width: 170,title: '创建时间', sort: true },
            { field: 'updateTime', width: 170,title: '修改时间', sort: true },
            { field: 'remark', width: 100, title: '操作', toolbar: '#barDemo' },
        ]],


        done: function(res, curr, count) {          //对表格数据的处理
            $("[data-field='area']").children().each(function () {
                if ($(this).text() == '1') {
                    $(this).text('A区');
                } else if ($(this).text() == '2') {
                    $(this).text('B区');
                }else if ($(this).text() == '3') {
                    $(this).text('C区');
                }else if ($(this).text() == '4') {
                    $(this).text('D区');
                }
            });

            $("[data-field='useStatus']").children().each(function () {
                if ($(this).text() == '1') {
                    $(this).text('未使用');
                } else if ($(this).text() == '0') {
                    $(this).text('使用中');
                }
            });


        },
        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
        request: {
            pageName: 'page' // 页码的参数名称，默认：page
            , limitName: 'limit' //每页数据量的参数名，默认：limit
        },
    });
    //监听排序
    //升序降序后重新渲染
    table.on('sort(test)',function(obj){
        table.reload('testReload', {
            initSort:obj
        });
    });
    table.reload('testReload',{})


    //表单数据重载
    var $ = layui.$,active = {
        reload: function(){
            var classroomNumber=$("#classroomNumber");
            var classroomName=$("#classroomName");
            var galleryfulMin=$("#galleryfulMin");
            var galleryfulMax=$("#galleryfulMax");
            var area = $("#area");
            var buildingNo = $("#buildingNo");
            var buildingFloor = $("#buildingFloor");
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    classroomNumber: classroomNumber.val(),
                    classroomName: classroomName.val(),
                    galleryfulMin: galleryfulMin.val(),
                    galleryfulMax: galleryfulMax.val(),
                    area:area.val(),
                    buildingNo:buildingNo.val(),
                    buildingFloor:buildingFloor.val()
                }
            });
        }
    };
    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });




    //监听头工具事件----添加
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
            case 'add':
                // layer.msg('添加')
                layer.open({
                    type: 1 //此处以iframe举例
                    , title:'教室信息录入表'
                    , area: ['800px', '650px']
                    , shade: 0
                    , maxmin: true
                    ,content:$("#insertPage")
                })


                $("#insertRoom").click(function () {
                    var istData={
                        "area":$("select[name='addArea']").val(),           //区域
                        "buildingNo":$("#addBuildingNo").val(),             //楼号
                        "buildingFloor":$("#addBuildingFloor").val(),       //楼层
                        "classroomId":$("#addClassroomId").val(),           //教室id
                        "classroomNumber":$("#addClassroomNumber").val(),   //教室号
                        "classroomName":$("#addClassroomName").val(),       //教室名称
                        "galleryful":$("#addGalleryful").val(),             //容纳人数
                        "useStatus":$("select[name='addUseStatus']").val(),               //使用状态
                        "remark":$("#addRemark").val()                      //详细信息
                    }


                    $.ajax({
                        type:"post",
                        url:'/room/addRoom',
                        data:JSON.stringify(istData),                                            //JS对象转换为字符串
                        contentType: "application/json;charset=utf-8",
                        dataType:"json",
                        success:function (istData) {
                            if(istData=='1'){
                                layer.msg('添加成功',{icon:6,time:1000},function () {
                                    window.location.reload();
                                })
                            }else if(istData=='0'){
                                layer.msg('添加失败',{icon:5,time:1000},function () {
                                    window.location.reload();
                                })
                            }
                        },error:function (error) {
                            layer.msg("添加请求失败")
                        }

                    });
                })
                break;
            case 'update':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else if(data.length > 1){
                    layer.msg('只能同时编辑一个');
                } else {
                    layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
                break;
            case 'delete':
                if(data.length === 0){
                    layer.msg('请选择一行');
                } else {
                    layer.msg('删除');
                    $.ajax({                //批量删除
                        type:"post",
                        url:'/room/multipleDelRoom',
                        contentType: "application/json;charset=utf-8",
                        data:JSON.stringify(json),
                        dataType:"json",
                        success:function (delData) {
                            if(delData > 1){
                                layer.msg('删除成功',{icon:6,time:1000},function () {
                                    window.location.reload();
                                })
                            }else if(delData < 1) {
                                layer.msg('删除失败', {icon: 5, time: 1000}, function () {
                                    window.location.reload();
                                })
                            }
                        },error:function (error) {
                            layer.msg("删除请求失败");
                        }
                    })
                }
                break;
        };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event //获得 lay-event 对应的值
            ,dropdown=layui.dropdown;
        if(layEvent === 'detail') {
            layer.msg('查看操作');
        } else if(layEvent === 'more'){
            //下拉菜单
            dropdown.render({
                elem: this //触发事件的 DOM 对象
                ,show: true //外部事件触发即显示
                ,data: [{
                    title: '编辑'
                    ,id: 'edit'
                },{
                    title: '删除'
                    ,id: 'del'
                }]
                ,click: function(menudata){
                    if(menudata.id === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del(); //删除对应行（tr）的DOM结构
                            //layer.close(index);
                            //向服务端发送删除指令

                            $.ajax({
                                type:'post',
                                url:'/room/delRoom',
                                data:JSON.stringify(data),
                                contentType:'application/json;charset=utf-8',
                                dataType:"json",
                                success:function (data) {
                                    if(data=='1'){
                                        layer.msg('删除成功',{icon:6,time:1000},function () {
                                            window.location.reload();
                                        })
                                    }else if(data=='0'){
                                        layer.msg('删除失败',{icon:5,time:1000},function () {
                                            window.location.reload();
                                        })
                                    }
                                },error:function (error) {
                                    alert("请求失败");
                                }

                            })
                        });
                    } else if(menudata.id === 'edit'){

                        layer.msg('编辑操作,当前行 ID:'+ data.stuId);
                        layer.open({
                            type: 1 //此处以iframe举例
                            , title:'教室========'+data.classroomName+'的信息'
                            , area: ['800px', '600px']
                            , shade: 0
                            , maxmin: true
                            ,content:$("#updatePage")
                        })


                        //数据回显
                        $("#updArea").val(data.area);                   //区域
                        $("#updBuildingNo").val(data.buildingNo);       //楼号
                        $("#updBuildingFloor").val(data.buildingFloor); //楼层
                        $("#updClassroomId").val(data.classroomId);     //教室id
                        $("#updClassroomNumber").val(data.classroomNumber);   //教室号
                        $("#updClassroomName").val(data.classroomName);       //教室名称
                        $("#updGalleryful").val(data.galleryful);             //容纳人数
                        $("#updUseStatus").val(data.useStatus);               //使用状态
                        // $("#updBirthday").val(timeFormat(data.birthday));//生日
                        $("#updRemark").val(data.remark);                      //详细信息


                                //修改信息
                                $("#updateRoom").click(function (){
                                    var updData={
                                        "pkId":data.pkId,
                                        "area":$("select[name='updArea']").val(),
                                        "buildingNo":$("#updBuildingNo").val(),
                                        "buildingFloor":$("#updBuildingFloor").val(),
                                        "classroomId":$("#updClassroomId").val(),
                                        "classroomNumber":$("#updClassroomNumber").val(),
                                        "classroomName":$("#updClassroomName").val(),
                                        "galleryful":$("#updGalleryful").val(),
                                        "useStatus":$("select[name='updUseStatus']").val(),
                                        "remark":$("#updRemark").val(),
                                    }
                                    $.ajax({
                                        type:"post",
                                        url:'/room/updateRoom',
                                        data:JSON.stringify(updData),
                                        contentType: "application/json;charset=utf-8",
                                        dataType:"json",
                                        success:function (upddata) {
                                            if(upddata.code=='0000'){
                                                layer.msg(""+upddata.msg,{icon:6,time:1000},function (){
                                                    window.location.reload();
                                                })
                                            }else if (upddata=='0'){
                                                layer.msg('修改失败',{icon:5,time:1000},function (){
                                                    window.location.reload();
                                                })
                                            }
                                        },error:function (error){
                                            layer.msg("修改请求失败")
                                        }
                                    })
                                })


                    }
                }
                ,align: 'right' //右对齐弹出（v2.6.8 新增）
                ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
            })
        }
    });
});

//JS
layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element
        ,layer = layui.layer
        ,util = layui.util
        ,$ = layui.$;

    //头部事件
    util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function(othis){
            layer.msg('展开左侧菜单的操作', {icon: 0});
        }
        ,menuRight: function(){
            layer.open({
                type: 1
                ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                ,area: ['260px', '100%']
                ,offset: 'rt' //右上角
                ,anim: 5
                ,shadeClose: true
            });
        }
    });
    //监听导航点击
    element.on('nav(demo)', function(elem){
        //console.log(elem)
        layer.msg(elem.text());
    })

});

layui.config({
    version: '1623988781494' //为了更新 js 缓存，可忽略
});
layui.use('form', function(){
    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

    //……

    //如果你的 HTML 是动态生成的，自动渲染就会失效
    //因此你需要在相应的地方，执行下述方法来进行渲染
    form.render('select');
});